<template>
     <a-layout-header>
      <div class="logo" ></div>
      <div class="login">
          <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <span style="color: #fff;cursor: pointer;"> 欢迎：<span style="color: skyblue;"> {{user.userName}}</span></span>
            &nbsp;
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <router-link to="/login">登录</router-link>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="logout">注销</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>  
      </div>


      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">首页</a-menu-item>
        <a-menu-item key="2" v-if="user.permission=='0'">
          
          <router-link to="/Layout/userAdmin">用户管理</router-link>
        </a-menu-item>
        <a-menu-item key="3" v-if="user.permission=='0'">
      
           <router-link to="/layout/content">目录管理</router-link>
        </a-menu-item>

      </a-menu>

    </a-layout-header>
</template>

<script>
import {ref, onMounted} from 'vue'
import {LocalStoreageUtil} from '../utils/LocalStoreage'
import { DownOutlined  } from "@ant-design/icons-vue";
import store from '../store';
import { useRouter } from 'vue-router';
export default {
    name: 'MyHeader',
    components: {DownOutlined},
    setup() {
      let user = ref();
      user.value = {};
      const router = useRouter();
      const logout = ()=>{
        // 清空本地存储
        store.commit('GETUSERINFO', {});
        // 跳转到登录页
        router.replace('/login');
      }
      onMounted(()=>{
        let userInfo = LocalStoreageUtil.getValue('token');
        console.log(userInfo);
        user.value = userInfo;
      })
      return {
        user,
        logout
      }
    }
}
</script>

<style scoped>
.login {
    float: right;
}
.login a {
    color: aliceblue;
}
.login a:hover {
    color: aquamarine;
}
</style>